<template>
  <div class="w-full max-w-md mx-auto">
    <div class="relative bg-gradient-to-r from-purple-400 to-pink-300 rounded-3xl p-6 overflow-hidden shadow-lg">
      <div class="relative z-10">
        <div class="flex justify-between items-start mb-8">
          <div>
            <h1 class="text-4xl font-bold text-white">{{ temperature }}°C</h1>
            <p class="text-xl text-white mt-1">{{ city }}</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" class="text-white w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
          </svg>
        </div>
        <div class="text-right text-white">
          <p class="text-lg">{{ date }}</p>
          <p class="text-md mt-1">{{ location }}</p>
        </div>
      </div>
      <svg class="absolute bottom-0 left-0 w-full" viewBox="0 0 400 100" preserveAspectRatio="none">
        <path d="M0,50 Q100,20 200,50 T400,50 L400,100 L0,100 Z" fill="rgba(255,255,255,0.2)" />
        <path d="M0,70 Q100,40 200,70 T400,70 L400,100 L0,100 Z" fill="rgba(255,255,255,0.3)" />
      </svg>
      <div class="absolute bottom-4 right-6">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 3L14.5 8.5L20 9.5L16 14L17 20L12 17L7 20L8 14L4 9.5L9.5 8.5L12 3Z" fill="white" />
        </svg>
      </div>
      <div class="absolute top-10 left-1/4">
        <svg xmlns="http://www.w3.org/2000/svg" class="text-white opacity-20 w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
        </svg>
      </div>
      <div class="absolute bottom-12 left-1/3">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L15 8L21 9L16.5 14L18 20L12 17L6 20L7.5 14L3 9L9 8L12 2Z" fill="white" opacity="0.2" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WeatherCard',
  props: {
    temperature: {
      type: Number,
      default: 19
    },
    city: {
      type: String,
      default: 'Shanghai'
    },
    date: {
      type: String,
      default: '01 June 2022'
    },
    location: {
      type: String,
      default: 'East Adrienstad'
    }
  }
}
</script>